<template>
  <div class="linkage">
    <el-select v-model="sheng" @change="choseProvince" size="small" class="select" placeholder="请选择省级地区"
      :disabled='disabled'>
      <el-option v-for="item in province" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>

    <el-select v-model="shi" @change="choseCity" size="small" class="select1" placeholder="请选择市级地区"
      :disabled='disabled'>
      <el-option v-for="item in city" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>

    <el-select v-model="qu" @change="choseBlock" v-if="!mutilStatus" class="select2" size="small" placeholder="请选择区级地区"
      :disabled='disabled'>
      <el-option v-for="item in area" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>

    <el-select v-model="qu" size="small" v-if="mutilStatus" multiple placeholder="请选择区级地区" class="select3"
      style="width:100%;margin-top:10px" @change="choseArea" :disabled='disabled'>
      <el-option v-for="item in area" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
import { getProvinceList, getCityList, getAreaList } from '@/api/area';
export default {
  name: 'Linkage',
  data() {
    return {
      province: [],
      city: [],
      area: [],
      sheng: '',
      shi: '',
      qu: '',
    }
  },
  props: ["selected", "mutilStatus", 'disabled'],
  watch: {
    deep: true,
    selected: function (n, o) {
      console.log(n)
      var _this = this;
      if (n.length === 0) {
        _this.sheng = "";
        _this.shi = "";
        _this.qu = "";
        _this.city = [];
        _this.area = [];
      }
      if (n.length === 3 && n.indexOf("") == -1) {
        this.getCityData(this.selected[0])
        this.getAreaData(this.selected[1])
        this.sheng = this.selected[0].toString();
        this.shi = this.selected[1].toString();
        if (this.mutilStatus == true) {
          this.qu = this.selected[2];
        } else {
          this.qu = this.selected[2].toString();
        }

      }
    },
  },
  methods: {
    // 加载china地点数据，三级
    async getProvinceData() {
      let province = []
      getProvinceList().then(res => {
        if (res.code === 200) {
          let provinceData = res.data;
          provinceData.map(function (item, index) {
            province.push({ value: item.provinceCode, label: item.provinceName })
          })
          this.province = province;
        } else {
          this.$message({
            message: res.errMsg,
            type: 'error'
          });
        }
      })

    },
    // 选省
    choseProvince: function (e) {
      this.shi = "";
      this.qu = "";
      this.city = [];
      this.area = [];
      this.getCityData(e)
      this.$emit('func', [this.sheng, this.shi, this.qu])
    },
    async getCityData(data) {
      let city = [];
      const res = await getCityList(data);
      if (res.code === 200) {
        let cityData = res.data;
        cityData.map(function (item, index) {
          city.push({ value: item.cityCode, label: item.cityName })
        })
        this.city = city;
      } else {
        this.$message({
          message: res.errMsg,
          type: 'error'
        });
      }
    },
    // 选市
    choseCity: function (e) {
      this.qu = "";
      this.getAreaData(e)
      this.$emit('func', [this.sheng, this.shi, this.qu])
    },
    async getAreaData(data) {
      let area = [];
      const res = await getAreaList(data);
      if (res.code === 200) {
        let areaData = res.data;
        areaData.map(function (item, index) {
          area.push({ value: item.areaCode, label: item.areaName })
        })
        this.area = area;
      } else {
        this.$message({
          message: res.errMsg,
          type: 'error'
        });
      }
    },
    // 选区
    choseBlock: function (e) {
      this.$emit('func', [this.sheng, this.shi, this.qu])
    },
    // 多选区域
    choseArea: function (val) {

      let obj = "";
      this.area.map((item, index) => {
        if (val.indexOf(item.value) != -1) {
          obj += item.label + "、";
        }
      });
      this.$emit('func', [this.sheng, this.shi, this.qu, obj])
    }
  },
  created: function () {
    this.getProvinceData();
    if (this.selected.length === 3) {
      this.choseProvince(this.selected[0].toString());
      this.choseCity(this.selected[1].toString());
      this.choseBlock();
      this.sheng = this.selected[0].toString();
      this.shi = this.selected[1].toString();
      if (this.mutilStatus == true) {
        this.qu = this.selected[2];
      } else {
        this.qu = this.selected[2].toString();
      }
      this.$emit('func', [this.sheng, this.shi, this.qu])
    }
    if (this.selected.length == 0) {
      this.city = [];
      this.area = [];
    }
  },
}
</script>

<style scoped>
.linkage .el-select {
  width: 210px;
}

.select,
.select1 {
  margin-right: 20px;
}
</style>
